<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><spring:message code="main.title" /></title>
<meta name="title" content="<spring:message code="main.title"/>" />
<link href="/css/reset.css" type="text/css" rel="stylesheet" />
<link href="/css/common2.css" type="text/css" rel="stylesheet" />
<link href="/css/layout.css" type="text/css" rel="stylesheet" />
<link href="/css/ui.css" type="text/css" rel="stylesheet" />
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js"
	type="text/javascript"></script>
<script src="/js/jquery.sidr.min.js" type="text/javascript"></script>
<script src="/js/fakeselect.js" type="text/javascript"></script>
<script src="/js/ui.js" type="text/javascript"></script>
<script src="/js/audiojs/audio.js"></script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=6713674deabef64c9c09b1076a5e169e"></script>
<script src="/js/common.js" type="text/javascript"></script>
<script type="text/javascript">
	var itemListHtml = "";
	var oMap = null;
	var oIcon = null;
	var currentContentsIndex = 0;
	var oInfoWnd = null;
	var defaultLevel = 8;
	var firstPoint = new nhn.api.map.LatLng(${result.latitude}, ${result.longitude});
</script>
<script type="text/javascript">
	$(document).ready(function() {
		// 좌측 메뉴
		fncSetMap();
		$('#simple-menu').sidr({
			body : '.electron_map'
		});
		$("#simple-menu").toggle(function() {
			$("#simple-menu").css({
				"background" : "url(/img/btn_close.png)"
			});
			var height = $(window).height();
			var width = $(window).width() - 200;
			oMap.setSize(new nhn.api.map.Size(width, height));
		}, function() {
			var height = $(window).height();
			var width = $(window).width();
			oMap.setSize(new nhn.api.map.Size(width, height));
			$("#simple-menu").css({
				"background" : "url(/img/btn_open.png)"
			});
		});
	
	});
	
	function fncSetMap() {
	
		var height = $(window).height();
		var width = $(window).width();
	
		oMap = new nhn.api.map.Map(document.getElementById('map_canvas'), {
			point : firstPoint,
			zoom : defaultLevel,
			enableWheelZoom : true,
			enableDragPan : true,
			enableDblClickZoom : false,
			mapMode : 0,
			activateTrafficMap : false,
			activateBicycleMap : false,
			minMaxLevel : [ 1, 14 ],
			size : new nhn.api.map.Size(width, height)
		});
	
		var oSlider = new nhn.api.map.ZoomControl();
		oMap.addControl(oSlider);
		oSlider.setPosition({
			top : 10,
			right : 10
		});
	
		var oSize = new nhn.api.map.Size(28, 37);
		var oOffset = new nhn.api.map.Size(14, 37);
		oIcon = new nhn.api.map.Icon(
				'http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
	
		oInfoWnd = new nhn.api.map.InfoWindow();
		oInfoWnd.setVisible(false);
		oMap.addOverlay(oInfoWnd);
	
		oInfoWnd.setPosition({
			top : 20,
			left : 20
		});
	
		var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
		oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
	
		oInfoWnd.attach('changeVisible', function(oCustomEvent) {
			if (oCustomEvent.visible) {
				oLabel.setVisible(false);
			}
		});
	
		var oMarker = new nhn.api.map.Marker(oIcon, {title : "${result.itemNm}"});
		oMarker.setPoint(firstPoint);
		oMap.addOverlay(oMarker);
		oLabel.setVisible(true, oMarker);
		
		var param = {
			itemId : "${result.itemId}",
			viewType : VIEW_LAYER
		};
		
		$.get("/item/itemData.do", param, function(data) {
			oInfoWnd.setContent(data);

			var a = audiojs.createAll();
			var audio = a[0];

			oInfoWnd.setPoint(firstPoint);
			oInfoWnd.setPosition({
				right : -278,
				top : 340
			});
			oInfoWnd.setVisible(true);
			oInfoWnd.autoPosition();
			return;
		});
			
	}
</script>
</head>
<body class="bg_no">
	<div class="">
		<div class="electron_map">
			<div class="" id="map_canvas"></div>
		</div>
	</div>
</body>
</html>